<!--
 * @Author: your name
 * @Date: 2022-01-24 17:22:44
 * @LastEditTime: 2022-01-28 22:38:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-ego\vue-ego\src\views\Goods\GoodsDialog.vue
-->
<template>
  <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
        >
        <!-- 表单内容区域 -->
        <div class="myform">
                <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类选择" prop="category">
            <el-button type="primary" v-model="goodsForm.category" @click="innerVisible = true">分类选择</el-button>
            <span>{{goodsForm.category || '请选择分类'}}</span>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
            <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
            <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
            <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
            <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="goodsForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
            <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="goodsForm.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" v-model="goodsForm.image" @click="UploadImgs">上传图片</el-button>
          <!-- 商品图片显示 -->
          <div v-for="(item,index) in imgUrl" :key="index">
            <img class="showimg" :src="item">
          </div>
         <!-- 编辑的时候商品图片的显示 -->


          
        </el-form-item>
        <el-form-item label="商品描述" prop="descs">
            <!-- 富文本编辑区域 -->
            <Editor @sendEditor='sendEditor' ref="MyEditor"/>
        </el-form-item>

        <!-- 按钮 -->
        <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
        <!-- 规格参数配置添加 -->
            <el-form-item label="规格参数" v-show="isShow">
                        <el-form
                    ref="dynamicValidateForm"
                    label-width="120px"
                    class="demo-dynamic"
                >
                    <el-form-item
                    v-for="(item, index) in groups"
                    :label="item.title"
                    :key="index"
                    :prop="item.value"
                    >
                        <el-input v-model="item.value"></el-input>
                    <!-- 内层的表单项 -->
                    <el-form-item
                        v-for="(ele, i) in item.children"
                        :label="ele.title"
                        :key="i"
                        :prop="ele.value"
                    >
                        <el-input v-model="ele.value"></el-input>
                    </el-form-item>
                    </el-form-item>
                </el-form>
            </el-form-item>
        </el-form>
        </div>


        <!-- 弹窗底部按钮区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm()">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>

        <!-- 1.内弹窗--类目选择 -->
         <el-dialog
        width="40%"
        title="类目选择"
        :visible.sync="innerVisible"
        append-to-body>

        <!-- 分类树形 -->
        <TreeGoods @CateName="CateName"/>

        <!-- 分类树形确认取消按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="innerVisible =false">取 消</el-button>
            <el-button type="primary" @click="showTreeData">确 定</el-button>
        </span>

        </el-dialog>

        <!-- 2.添加图片--上传图片 -->
         <el-dialog
        width="50%"
        title="上传图片"
        :visible.sync="innerVisibleImg"
        append-to-body>

        <!-- 上传图片控件 -->
        <UploadImg @sendImg='sendImg'/>

        <!-- 分类树形确认取消按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="innerVisibleImg =false">取 消</el-button>
            <el-button type="primary" @click="showImg">确 定</el-button>
        </span>

        </el-dialog>

        </el-dialog>
  </div>
</template>

<script>
import TreeGoods from './TreeGoods.vue'
import UploadImg from './UploadImg.vue'
import Editor from './Editor.vue'
export default {
    name:'GoodsDialog',
    props:{
        title:{
            type:String,
            default:'title'
        },
        rowData:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    components:{TreeGoods,UploadImg,Editor},
    data() {
      return {
        goodsForm: {
          //表单容器-对象
            title: "", //商品名称
            price: "",
            num: "",
            sellPoint: "",
            image: '',
            descs: "",
            category: "", //商品类目
            date1: "", //商品时间
            date2: "", //商品时间
            cid:'',
            id:'',
        },
        rules: {
         title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
            ],
            price: [{ required: true, message: "请输入价格", trigger: "blur" }],
            num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        },
        dialogVisible:false,
        innerVisible:false,
        TreeObject:{},
        innerVisibleImg:false,
        imgUrl:[],
        isShow:false, //规格参数,默认不显示
        groups:[]
      };
    },
    methods: {
        close(){
            this.$emit('changeDialog')
        },
        //接收子组件发过来的选中的tree分类名称对象
        CateName(val){
            // console.log('%%%%',val);
            this.TreeObject = val
            
        },
        //确定按钮显示分类名称
        showTreeData(){
            this.goodsForm.cid = this.TreeObject.cid
            this.goodsForm.category = this.TreeObject.name //赋值过来的分类名称到goodsForm里
            this.innerVisible =false //关闭弹窗
            this.$api.categoryData({
                cid:this.TreeObject.cid
            }).then((res) => {
                if (res.data.status === 200) {
                this.isShow = true //是否显示规格参数配置
                console.log(res.data);
                let result = res.data.result[res.data.result.length-1]
                this.groups = JSON.parse(result.paramData);

                }else{

                }
            })


        },
        //上传图片
        UploadImgs(){
            this.innerVisibleImg = true
        },
        //接收子組件穿傳過來的圖片數據
        sendImg(val){
            // console.log('^^^^',val);
            this.imgUrl =val
            // console.log('接收子組件穿傳過來的圖片数据',this.imgUrl);
            //将重组的数组图片赋值到image里,以字符串形式
            this.goodsForm.image = this.imgUrl.toString()
        },
        //確定展示圖片
        showImg(){
            // this.goodsForm.image = this.imgUrl    
            this.innerVisibleImg = false

        },
        //接收富文本编辑器发送过来的内容
        sendEditor(val){
            // console.log('&&&',val);
            this.goodsForm.descs = val
        },
        //表单提交确定按钮
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                

                // 参数： title cid  category sellPoint price num descs paramsInfo image
                //请求的字段按照后台要求解构赋值
                let {title,cid,category,sellPoint,price,num,descs,image,id} = this.goodsForm
            if (valid) { // valid为true表示成功
                // console.log(this.goodsForm);
                if (this.title === '添加商品') {
                    console.log('添加商品');
                    this.$api.getAddGoods({
                    title,cid,category,sellPoint,price,num,descs,image,
                    paramsInfo:JSON.stringify(this.groups)
                }).then((res) => {
                    // console.log(res.data);
                    this.$parent.pageList(1) // 更新数据
                    this.$message({
                    message: '恭喜你，商品添加成功',
                    type: 'success'
                    });
                    this.resetForm()
                })

                } else {
                    console.log('编辑商品');
                    this.$api.getEditGoods({
                        title,cid,category,sellPoint,price,num,descs,image,id,
                        paramsInfo:JSON.stringify(this.groups)
                    }).then((res) => {
                        // console.log(res.data)
                        if (res.data.status === 200) {
                            this.$parent.pageList(1) // 更新数据
                            this.$message({
                            message: '恭喜你，编辑添加成功',
                            type: 'success'
                            
                        });
                        this.resetForm()
                        } else {
                            this.$message.error('商品修改错误');
                        }
 
                    })

                }
                
            } else {
                this.$message.error('商品添加错误');
                return false;
            }
            });
        },

        //取消重置按钮
        resetForm() {
        // this.$refs.ruleForm.resetFields(); //表单重置element的
        this.goodsForm={ //表单重置
            //表单容器-对象
            title: "", //商品名称
            price: "",
            num: "",
            sellPoint: "",
            image: '',
            descs: "",
            category: "", //商品类目
            date1: "", //商品时间
            date2: "", //商品时间
            cid:''
        }
        this.dialogVisible =false //关闭弹窗
        this.$refs.MyEditor.editor.txt.clear() //清空编辑器内容。
        this.imgUrl = []  //清空图片数组数据
        this.groups = []
        this.isShow = false
      },

      //小×按钮提示
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.resetForm()
          })
          .catch(_ => {});
      }
    
    
    },
    watch:{
        rowData(val){
            console.log('监听',val);
            let imgLIstanbul= val.image.split(',') //将对象里的image的字符串已,分割为数组
            // console.log(imgLIstanbul);
            this.imgUrl = imgLIstanbul
            this.goodsForm = val
            this.$nextTick(() => {
                // console.log('this.$refs.MyEditor',this.$refs.MyEditor);
                this.$refs.MyEditor.editor.txt.html(val.descs)
            })
            if (val.paramsInfo) {
                this.isShow = true
                this.groups = JSON.parse(val.paramsInfo)
            }
            
        }
    }
}
</script>

<style lang="less" scoped>
span{
    padding-left: 20px;
    color: red;
    font-size: 16px;
}
.showimg{
    float:left;
    margin-top: 20px;
    height: 150px;
    line-height: 10px;
    margin-left: 15px;
}
</style>
